<template>
	<div class="rightcontainer">
		<div class="rightmain">
			<div class="title">账号设置</div>
			<div class="itemdiv">
				<div class="icondiv">
					<img src="@/assets/img/icon3.png"/>
				</div>
				<div class="txtdiv">
					<div class="txt1"><span class="txt3">账号密码</span></div>
					<div class="txt2">用于保护账号信息和登录安全</div>
				</div>
				<div class="btndiv">
					<el-button type="primary" class="infobtn" >修 改</el-button>
				</div>
			</div>
			<div class="itemdiv">
				<div class="icondiv">
					<img src="@/assets/img/icon4.png"/>
				</div>
				<div class="txtdiv">
					<div class="txt1"><span class="txt3">安全邮箱</span><img class="txt5" src="@/assets/img/icon5.png"/><span class="txt4">未绑定</span></div>
					<div class="txt2">用于保护账号信息和登录安全</div>
				</div>
				<div class="btndiv">
					<el-button type="primary" class="infobtn" >绑 定</el-button>
				</div>
			</div>
			<div class="itemdiv">
				<div class="icondiv">
					<img src="@/assets/img/icon2.png"/>
				</div>
				<div class="txtdiv">
					<div class="txt1"><span class="txt3">安全手机</span><img class="txt5" src="@/assets/img/icon5.png"/><span class="txt4">未验证</span></div>
					<div class="txt2">安全手机将可用于登录账号和重置密码，建议立即设置</div>
				</div>
				<div class="btndiv">
					<el-button type="primary" class="infobtn" >验 证</el-button>
				</div>
			</div>
			<div class="itemdiv">
				<div class="icondiv">
					<img src="@/assets/img/icon1.png"/>
				</div>
				<div class="txtdiv">
					<div class="txt1"><span class="txt3">身份认证</span><img class="txt5" src="@/assets/img/icon5.png"/><span class="txt4">未验证</span></div>
					<div class="txt2">身份认证便于考试认证</div>
				</div>
				<div class="btndiv">
					<el-button type="primary" class="infobtn" >认 证</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	
	export default {
		data() {
			return {
				
			};
		},
		computed: {
		},
		mounted() {
			
		},
	
		methods: {
			
		},
	};
</script>

<style lang="less" scoped>
	.rightcontainer {
		width: 920px;
		margin:0 auto 40px;
		overflow: hidden;

		.rightmain {
			width: 100%;
			margin: 20px 0;

			.title {
				color: #134B9F;
				font-size: 20px;
				line-height: 18px;
				font-weight: bold;
				padding-bottom: 9px;
				border-bottom: 2px solid #134B9F;
				display: inline-block;
				letter-spacing: 2px;
			}

			.itemdiv {
				height:96px;
				width:100%;
				background-color:#f5f5f5;
				margin-top:20px;
				margin-bottom: 20px;
				display:flex;
				flex-direction: row;
				.icondiv{
					width:40px;
					height:40px;
					margin-top:28px;
					margin-left:30px;
					margin-right:15px;
					img{
						width: 100%;
						height: 100%;
						object-fit: contain;
					}
				}
				.txtdiv{
					flex:1;
					.txt1{
						width:100%;
						height:40px;
						margin-top:13px;
						display:flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items:center;
						.txt3{
							line-height: 40px;
							font-size:20px;
							font-weight:500;
						}
						.txt4{
							font-size:12px;
							color:#FF0E0E;
						}
						.txt5{
							width:14px;
							height:14px;
							margin-left:20px;
							margin-right:3px;
						}
						
					}
					.txt2{
						width:100%;
						height:30px;
						line-height:30px;
						font-size:16px;
					}
				}
				.btndiv{
					width:130px;
					margin-right:40px;
					display:flex;
					justify-content: center;
					align-items:center;
					.infobtn{
						background-color:#134B9F;
						border:none;
						width:100%;
					}
				}
			}
		}
	}
</style>
